<template>
    <div class="g-dialog-container" v-loading="loading" element-loading-text="加载中"
         element-loading-spinner="el-icon-loading">
        <div class="g-dialog-content">
            <el-form size="mini" label-suffix="：" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                     label-width="100px" class="demo-ruleForm">
                <div class="shade-text">
                    <el-form-item label="用户名" prop="username">
                        <el-input show-word-limit maxlength="20" placeholder="请输入" size="mini"
                                  v-model="ruleForm.username" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="fullName">
                        <el-input show-word-limit maxlength="20" placeholder="请输入" v-model="ruleForm.fullName"
                                  size="mini" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input placeholder="请输入" v-model="ruleForm.phone" size="mini" clearable></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email">
                        <el-input placeholder="请输入" v-model="ruleForm.email" size="mini" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="启用状态" prop="enabled">
                        <el-switch
                            v-model="ruleForm.enabled"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        >
                        </el-switch>
                    </el-form-item>

                </div>
                <el-form-item label="角色" prop="roleIdList" class="role-map" style="width: 100%">
                    <el-checkbox-group v-model="ruleForm.roleIdList">
                        <el-checkbox v-for="item in roleData" :label="item.id" :key="item.id">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="g-dialog-footer">
            <el-button type="primary" size="mini" icon="el-icon-circle-check" @click="handleSave">保存</el-button>
            <el-button type="primary" size="mini" icon="el-icon-circle-close" @click="handleCancel">取消</el-button>
        </div>
    </div>
</template>
<script>
import { checkPhone, isEmail } from '@/utils/validate.js'
import { getUser, addUser, updateUser } from '@/api/system/user'
import { getCommonList } from '@/api/common'
import { deepClone } from '@/utils'

export default {
    props: {
        //判断是否进行修改
        isUpdate: {
            type: Boolean,
            default: true
        },
        //修改id
        userId: {
            type: [String, Number],
            default: ''
        }
    },
    data() {
        return {
            loading: false,
            ruleForm: {
                id: null,
                username: '', //用户名
                phone: '', //手机号
                fullName: '', //用户姓名
                email: '', //邮箱
                enabled: true,
                roleIdList: []
            },
            roleData: [], //角色
            rules: {
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '用户名不能为空'
                    }
                ],
                fullName: [
                    {
                        required: true,
                        message: '姓名不能为空',
                        trigger: 'blur'
                    }
                ],
                email: [{ required: true, validator: isEmail, trigger: 'blur' }],
                phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
                roleIdList: [
                    {
                        required: true,
                        message: '角色不能为空',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    created() {
        this.getData()
    },
    methods: {
        //获取数据
        async getData() {
            this.loading = true
            await getCommonList('role').then(res => {
                this.roleData = res.obj
            }).catch(() => {
            })
            if (this.isUpdate) {
                getUser(this.userId).then((res) => {
                    this.loading = false
                    if (res.status != 200) return this.$msgPrompt.error(res.msg)
                    for (let key in this.ruleForm) {
                        this.ruleForm[key] = res.obj[key]
                    }
                })
            } else {
                this.loading = false
            }
        },
        //保存
        handleSave() {
            this.$refs.ruleForm.validate((valid) => {
                if (!valid) return
                this.$startLoading()
                this.isUpdate ? this.userUpdate() : this.addUser()
            })
        },
        //添加
        addUser() {
            addUser(deepClone(this.ruleForm)).then((res) => {
                this.$endLoading()
                if (res.status != 200) return this.$msgPrompt.error(res.msg)
                this.$msgPrompt.success()
                this.$emit('succeed')
            })
        },
        //修改
        userUpdate() {
            updateUser(deepClone(this.ruleForm)).then((res) => {
                this.$endLoading()
                if (res.status != 200) return this.$msgPrompt.error(res.msg)
                this.$msgPrompt.success()
                this.$emit('succeed')
            })
        },
        //取消
        handleCancel() {
            this.$emit('close')
        }
    }
}
</script>
<style scoped lang="scss">
.g-dialog-container {
    .g-dialog-content {
        overflow: hidden;
    }

    .shade-text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .el-form {
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        ::v-deep .role-map.el-form-item {
            height: 100%;
            overflow: hidden;
            margin-bottom: 0;

            .el-form-item__content {
                .el-checkbox-group {
                    max-height: 230px;
                    padding-bottom: 10px;
                    overflow: auto;
                    display: flex;
                    flex-wrap: wrap;

                    .el-checkbox {
                        margin-right: 15px;
                    }
                }
            }
        }

    }


    ::v-deep.el-checkbox {
        min-width: 120px;
    }

    .el-input,
    .el-select {
        width: 230px;
    }

    .el-textarea {
        width: 562px;
    }
}
</style>
